import React, { useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  Modal
} from 'react-native';

const LengthSelectionModal = ({ 
  visible, 
  onClose, 
  onSubmit, 
  initialValue = '1000-2000'
}: { 
  visible: boolean, 
  onClose: () => void, 
  onSubmit: (length: string) => void,
  initialValue?: string
}) => {
  // 状态管理
  const [selectedLength, setSelectedLength] = useState(initialValue);

  // 长度选项配置
  const lengthOptions = [
    { value: '500-1000', label: '500-1000字' },
    { value: '1000-2000', label: '1000-2000字' },
    { value: '2000-3000', label: '2000-3000字' },
    { value: '3000-5000', label: '3000-5000字' },
    { value: '5000-8000', label: '5000-8000字' },
    { value: '8000以上', label: '8000字以上' }
  ];
  
  const handleSubmit = () => {
    onSubmit(selectedLength);
    onClose();
  };
  
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <View style={styles.header}>
            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeButton}>取消</Text>
            </TouchableOpacity>
            <Text style={styles.title}>选择文本长度</Text>
            <TouchableOpacity onPress={handleSubmit}>
              <Text style={styles.doneButton}>确定</Text>
            </TouchableOpacity>
          </View>
          
          <View style={styles.optionsContainer}>
            {lengthOptions.map((option) => (
              <TouchableOpacity
                key={option.value}
                style={[
                  styles.lengthOption,
                  selectedLength === option.value && styles.selectedOption
                ]}
                onPress={() => setSelectedLength(option.value)}
              >
                <Text style={[
                  styles.optionText,
                  selectedLength === option.value && styles.selectedText
                ]}>
                  {option.label}
                </Text>
                {selectedLength === option.value && (
                  <View style={styles.checkmark}>
                    <Text style={styles.checkmarkText}>✓</Text>
                  </View>
                )}
              </TouchableOpacity>
            ))}
          </View>
          
          <Text style={styles.note}>
            注：文本长度为估计值，实际生成内容可能略有差异。
          </Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: 30,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  title: {
    fontSize: 17,
    fontWeight: 'bold',
  },
  closeButton: {
    fontSize: 16,
    color: '#666',
  },
  doneButton: {
    fontSize: 16,
    color: '#4a90e2',
    fontWeight: '500',
  },
  optionsContainer: {
    padding: 15,
  },
  lengthOption: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  selectedOption: {
    backgroundColor: '#f7f7f7',
  },
  optionText: {
    fontSize: 16,
    color: '#333',
  },
  selectedText: {
    color: '#4a90e2',
    fontWeight: '500',
  },
  checkmark: {
    width: 22,
    height: 22,
    borderRadius: 11,
    backgroundColor: '#4a90e2',
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkmarkText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 14,
  },
  note: {
    fontSize: 14,
    color: '#999',
    padding: 15,
    paddingTop: 5,
  },
});

export default LengthSelectionModal; 